<template>
  <ui-page
      class="order"
      :enable-refresh="true"
      @scrolltolower="handleScrollToLower"
      @refresh="handlePageRefresh"
  >
    <ui-filter :value="filters" slot="filter" @change="handleFilterChange">
      <ui-filter-group>
        <ui-filter-item>
          <view class="order__filter-item-label">
            <ui-textbox style="border-radius: 10rpx;" @input="handleFilterChange"
                        v-model="filters.queryParam"
                        placeholder="输入搜索关键词"
            ></ui-textbox>
          </view>
        </ui-filter-item>
<!--        <ui-filter-item >
          <ui-button   size="mini"  type="danger" text=""   @click="clearFilter">清空筛选</ui-button>
        </ui-filter-item>-->
        <ui-filter-item>
          <view class="mine-people__action"
                @click="handleAddClick">
            <bi-icon-button
                type="warning"
                size="mini"
                :icon="require('./images/plus.png')"
                text="提交费用"
            ></bi-icon-button>
          </view>
        </ui-filter-item>

      </ui-filter-group>
      <ui-filter-group>
        <ui-filter-item  >
          <view style="left: 0rpx;right: 0rpx">
            <order-items  v-model="filters.orderStatus"  :items="typeItems"  :scope="tabbarScope">
              <view class="" slot="item" slot-scope="{ item, scope }">
                <text class="">{{ item.label}}</text>
                <text v-if="item.name==='1' && scope.badgeIndex>0" class="order__tabbar-item-badge" >{{scope.badgeIndex }}</text>
              </view>
            </order-items>
          </view>
        </ui-filter-item>
      </ui-filter-group>
    </ui-filter>
    <ui-load-data
        ref="dataList"
        :page-size="20"
        :more-offset="-16"
        @query="handleQueryData"
        v-model="orderData"
    >
      <bi-order-card
          v-for="(item, index) in orderData"
          :key="index"
          :data="item"
          @click="handleOrderItemClick(item)"
          :current-time-type="currentTimeType"
      >
        <template slot="toolbar">
          <view
              class="order__toolbar"
              @click.stop >
            <view class="order__toolbar-right">
              <ui-toolbar :padding="false" style="right: 0rpx;float: right">
                <ui-toolbar-item v-if="item.orderStatus===1">
                  <view style="width: 130rpx;background-color: red;color: white;height: 45rpx;border-radius: 15rpx;font-size: 28rpx;line-height: 45rpx"  @click="handlDeleteOrderClick(item)">
                    点击删除
                  </view>
                </ui-toolbar-item>
                <ui-toolbar-item v-if="item.orderStatus===1">
                  <view style="width: 130rpx;background-color: #409049;color: white;height: 45rpx;border-radius: 15rpx;font-size: 28rpx;line-height: 45rpx"  @click="handleUpdateClick(item)">
                    点击编辑
                  </view>
                </ui-toolbar-item>
                <ui-toolbar-item  v-if="item.orderStatus===1">
                  <view style="width: 130rpx;background-color: #409049;color: white;height: 45rpx;border-radius: 15rpx;font-size: 28rpx;line-height: 45rpx"  @click="handlCompleteOrderClick(item)">
                    点击完成
                  </view>
                </ui-toolbar-item>
              </ui-toolbar>
            </view>
          </view>
        </template>
      </bi-order-card>
    </ui-load-data>
    <template slot="body">
      <view class="order__follow-official" v-if="!checkFlag">
        <bi-follow-official-account :shadow="true"></bi-follow-official-account>
      </view>
    </template>
  </ui-page>
</template>
<script>
import { loadOrderListData,deleteOrderById,completeOrderById} from '@/apis/order.js';
import BiOrderCard from '@/common/order-card/order-card.vue';
import { buildUrl } from '@/utils/url.js';
import { getShareData } from '@/utils/share.js';
import BiShareButton from '@/common/share-button/share-button.vue';
import BiFollowOfficialAccount from '@/common/follow-official-account/follow-official-account.vue';
import Event from '@/utils/event.js';
import {success} from "@huntianning/miniprogram/components/ui-message/ui-message.js";
import OrderItems  from  '@/common/items-order/order-items.vue';
import { sub5Hours} from '@/apis/order.js';
import { mapGetters } from 'vuex'
import storage from '@/utils/storage'
import BiIconButton from '@/common/icon-button/icon-button.vue';

export default {
  components: {
    BiIconButton,
    OrderItems,
    BiOrderCard,
    BiShareButton,
    BiFollowOfficialAccount
  },
  data() {
    return {
      currentTimeType:null,
      orderData:[],
      indexMapImage: 'https://hsmw-tool-pic-1303885219.cos.ap-beijing.myqcloud.com/weapp/files/htn/map-pin.png',
      checkFlag:true,
      radioList:[{
        value:'1',
        name:'全部',
        isCheck:true
      },{
        value:'2',
        name:'查看外租车订单'
      },{
        value:'3',
        name:'查看自有车订单'
      }],
      checkRadio: false,
      tabbarScope: {
        badgeIndex:''
      },
      completeFilters: {
        notFilled: false
      },
      filters: {
        orderStatus: 1,
        queryParam: null,
        orderType:2,
        vehicleYears:null,
        chassis:null,
        vehicleType:null,
        markPrice:null,
        vehicleModel:null,
        vehicleBrand:null,
        vehicleLocaltion:null
      }
    };
  },
  created() {
    console.log('currentTimeType',this.currentTimeType)

  },
  computed: {
    typeItems() {
      return [
        {
          label: '处理中',
          name: '1'
        },
        {
          label: '已完成',
          name: '2'
        },
        {
          label: '已删除',
          name: '3'
        }
      ];
    },
  },
  onLoad(urlParams) {
    if(urlParams && urlParams.vehicleType){
      this.filters.vehicleType=urlParams.vehicleType
    }
    if(urlParams && urlParams.orderType){
      this.filters.orderType=urlParams.orderType
    }
  },
  onShareAppMessage() {
    return getShareData();
  },
  onShow() {
    this.$refs.dataList && this.$refs.dataList.reload();
    this.currentTimeType=storage.get('CURRENT_TIME_TYPE')

  },
  methods: {
    handleAddClick(){
      uni.navigateTo({
        url: '/packages/mine/order/order-create-finance'
      })
    },
    longPress() {
      this.timeout = setTimeout(() => {
        this.isLongPress = true;
        // 执行保存图片的操作
        this.saveImage();
      }, 500); // 设置长按的阈值为500毫秒
    },
    clearFilter(){
      console.log('clearFilter')
      this.filters={};
    },
    handleRadioClick(item){
      if(item.value==='1'){
        this.outsideLeasingFlag = '';
      }else if(item.value==='2'){
        this.outsideLeasingFlag = 1;
      }else{
        this.outsideLeasingFlag = 0;
      }
      this.$refs.dataList.reload();
    },
    handlDeleteOrderClick(item) {
      uni.showModal({
        "cancelText":'取消',
        'confirmText':'确认',
        'confirmColor':"#F18662",
        'content':'是否确认删除费用信息？',
        'success': (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: buildUrl('/packages/order/order-cancel/order-cancel', {
                id: item.id,
                eventName: this.cancelOrderEvent,
                orderType: item.orderType
              })
            });
          }
        }
      })
    },
    handlCompleteOrderClick(item) {
      uni.showModal({
        "cancelText":'取消',
        'confirmText':'确认',
        'confirmColor':"#F18662",
        'content':`是否确认完成工单信息？`,
        'success': (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: buildUrl('/packages/order/order-complete/order-complete', {
                id: item.id,
                eventName: this.cancelOrderEvent,
                orderType: item.orderType
              })
            });
          }
        }
      })
    },
    handlePageRefresh({ setCallback }) {
      setCallback(() => {
        return this.$refs.dataList && this.$refs.dataList.reload();
        this.currentTimeType=storage.get('CURRENT_TIME_TYPE')

      });
    },
    handleScrollToLower() {
      this.$refs.dataList && this.$refs.dataList.loadMore();
      this.currentTimeType=storage.get('CURRENT_TIME_TYPE')

    },
    handleFilterChange() {
      setTimeout(() => {
        this.$refs.dataList && this.$refs.dataList.reload()
      }, 300)
    },
    handleRenderSharePath(item) {
      uni.navigateTo({
        url: buildUrl('/packages/vehicle/vehicle-detail/vehicle-detail', {
          id: item.vehicleId,
          eventName: this.changeEventName,
          data:JSON.stringify(item),
          behavior: 'share'
        })
      });
    },
    handleOrderItemClick(item) {
      uni.navigateTo({
        url: buildUrl('/packages/order/order-detail/order-detail', {
          id: item.id,
          eventName: this.changeEventName,
          data:JSON.stringify(item),
          behavior: 'share',
          currentTimeType:this.currentTimeType

        })
      });
    },
    handleQueryData({ setCallback }) {
      setCallback((params) => {
       /* if (this.lastRequest && this.lastRequest.abort) {
          this.lastRequest.abort();
        }*/
        let nextParams = {};
        nextParams = Object.assign({}, params, this.filters, {
          outsideLeasingFlag: this.outsideLeasingFlag
        });
        this.lastRequest = loadOrderListData(nextParams);
        return this.lastRequest
            .then((rs) => {
              let res=rs.records;
              if(res){
                this.tabbarScope.badgeIndex=res.filter(item=>item.orderStatus===1).length;
              }
              return rs.records;
            })
            .finally(() => {
              this.lastRequest = null;
            });
      });
    },
    handleUpdateClick(item) {
      this.currentRow = item;
      if(this.currentRow.orderType===1){
        uni.navigateTo({
          url:buildUrl( '/packages/mine/order/order-create',{
            id:this.currentRow.id,
            amend:true
          })
        })
      }else {
        uni.navigateTo({
          url:buildUrl( '/packages/mine/order/order-create-finance',{
            id:this.currentRow.id,
            amend:true
          })
        })
      }

    },
    handleUpdateInfoClick(){
      uni.navigateTo({
        url:buildUrl( '/packages/mine/order/order-create',{
          id:this.currentRow.id,
          amend:true
        })
      })
      this.$refs.orderActionSheet.close();
    },
    handleUpdateCarClick() {
      this.$refs.orderActionSheet.close();
      uni.navigateTo({
        url: buildUrl('/packages/order/order-update-car/order-update-car', {
          id: this.currentRow.id,
          eventName: this.updateCarEventName
        })
      });
    },
  },
  beforeDestroy() {
    Event.off(this.cancelOrderEvent);
    Event.off(this.updateCarEventName);
    Event.off(this.updateBuildEventName);
    Event.off(this.changeEventName);
  },
};
</script>

<style lang="less">
.order__toolbar {
  padding-top: 15rpx;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.order__complete-field-label {
  font-weight: bold;
}
.order__complete-field-value {
  &.is-hight {
    color: #f47554;
  }
  &.is-danger {
    color: #f00;
  }
  + .order__complete-field-value {
    margin-left: 6px;
  }
}
.order__follow-official {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
}
.order__complete-filter {
  padding: 6px 0 16px 0;
  margin-bottom: -8px;
}

.loading {
  margin-bottom: 0;
  font-size: 20px;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  margin-top: 5p;
}

.request-loading-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 198903060;
  background-color: rgba(0, 0, 0, 0.001);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-view {
  width: 160upx;
  height: 160upx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 动画样式 */
.loading {
  border: 10upx solid rgba(0, 0, 0, 0.01);
  border-radius: 50%;
  border-top: 10upx solid #fff;
  border-right: 10upx solid #fff;
  border-bottom: 10upx solid #fff;
  width: 60upx;
  height: 60upx;
  -webkit-animation: spin 1.4s linear infinite;
  animation: spin 1.4s linear infinite;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.radio-item{
  transform: scale(0.8);
  font-size: 30rpx;
  font-weight: bold;
}
.order__tabbar-item-badge{
  display: inline-block;
  height: 18px;
  line-height: 18px;
  color: #fff;
  background-color: #c00;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 12px;
  vertical-align: top;
  margin-top: 3px;
  margin-left: 3px;
}
.order__tabbar-item-text{
  font-size: 28rpx;
  font-weight: 700;
  transform: scale(0.8);
  //font-size: 30rpx;
  font-weight: bold;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc((100vw - 90rpx) / 2));
  padding: 30rpx 30rpx 0 30rpx;
  justify-content: space-between;
}
.list-container {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
  margin-top: 15rpx;
  width: 50%; /* 每行显示两条，所以宽度为50% */
  box-sizing: border-box;
  padding: 10px; /* 根据需要调整间距 */
  height: 470rpx;
  background-color: white;
}
.item-content {
  /* 这里放你的样式，比如边框、背景色等 */
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  height: 400rpx;
}
.order__toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.order__complete-field-label {
  font-weight: bold;
}
.order__complete-field-value {
  &.is-hight {
    color: #f47554;
  }
  &.is-danger {
    color: #f00;
  }
  + .order__complete-field-value {
    margin-left: 6px;
  }
}
.order__toolbar-right{
  float: right;
  text-align: right;
  display: inline-block;
  margin-left: 200rpx;

}
.order__tabbar-item-badge{
  display: inline-block;
  height: 18px;
  line-height: 18px;
  color: #fff;
  background-color: #c00;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 12px;
  vertical-align: top;
  margin-top: 3px;
  margin-left: 3px;
}
.order__filter-item-label{
  padding-left: 15rpx;
  font-size: 28rpx;
  border-radius: 15rpx;
  border: 3rpx solid #ccc;
}
</style>
